﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CascadingDropDowns.aspx.cs"
    Inherits="DummyWebProject.CascadingDropDowns" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/jquery-1.3.2.min.js" />
                <asp:ScriptReference Path="~/jquery-ui-1.7.1.custom.min.js" />
                <asp:ScriptReference Assembly="JQuery" Name="JQuery.JQuery.ACT.js" />
            </Scripts>
        </asp:ScriptManager>
        <asp:DropDownList runat="server" class="list1">
            <asp:ListItem Text="Flowers" Value="1" />
            <asp:ListItem Text="Animals" Value="2" />
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList1" runat="server" class="list2">
            <asp:ListItem class="sub_1" Text="Roses" Value="11" />
            <asp:ListItem class="sub_1" Text="Ochid" Value="12" />
            <asp:ListItem class="sub_1" Text="Tulip" Value="13" />
            <asp:ListItem class="sub_1" Text="Tulipaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" Value="13" />
            <asp:ListItem class="sub_2" Text="Humans" Value="21" />
            <asp:ListItem class="sub_2" Text="Dogs" Value="22" />
            <asp:ListItem class="sub_2" Text="Cats" Value="23" />
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server" class="list3">
            <asp:ListItem class="sub_11" Text="Pink" Value="111" />
            <asp:ListItem class="sub_11" Text="Red" Value="112" />
            <asp:ListItem class="sub_12" Text="Blue" Value="123" />
            <asp:ListItem class="sub_12" Text="Pink" Value="124" />
            <asp:ListItem class="sub_13" Text="Yellow" Value="133" />
            <asp:ListItem class="sub_21" Text="Man" Value="211" />
            <asp:ListItem class="sub_21" Text="Woman" Value="212" />
            <asp:ListItem class="sub_22" Text="Chihuahua" Value="221" />
            <asp:ListItem class="sub_22" Text="Caniche" Value="222" />
            <asp:ListItem class="sub_23" Text="Persan" Value="231" />
            <asp:ListItem class="sub_23" Text="Bastard" Value="232" />
        </asp:DropDownList>
    </div>
    </form>

    <script type="text/javascript">
        $('.list2').cascade({ parentDropDowns: '.list1' });
        $('.list3').cascade({ parentDropDowns: '.list2' });
    </script>

</body>
</html>
